import React, { useState } from "react";
import {
  View,
  TextInput,
  Button,
  Alert,
  Switch,
  Text,
  ScrollView,
  Pressable,
  FlatList,
  SectionList,
  ActivityIndicator,
  KeyboardAvoidingViewComponent,
  Modal,
  RefreshControl
} from "react-native";

export default function App() {
  const [text, setText] = useState("");
  const [num, setNum] = useState("");
  const [search, setSearch] = useState("");
  const [isOn, SetIsOn] = useState(false);
  return (
    <View>
      <TextInput value={text} onChangeText={(t) => setText(t)} />
      <TextInput
        value={num}
        onChangeText={(t) => setNum(t)}
        keyboardType="numeric"
      />
      <TextInput
        value={search}
        onChangeText={(t) => setSearch(t)}
        returnKeyType="search"
      />
      <Button
        title="发送"
        onPress={() => {
          Alert("i am a xx");
        }}
        accessibilityLabel="press btn"
      />
      <Switch onValueChange={SetIsOn} value={isOn} />
    </View>
  );
}
//基础组件

//Image
//resizeModel属性:cover contain stretch repeat center

//TextInput
//keyboardType="numeric" returnKeyType="search"

//Button
//对按钮要求不高可以使用该组件 属性title onPress是必填项

//Switch

//容器组件

//View
//View文件必须在Text中

//Text
//默认独占一行 相当于<P></P> 当Text嵌套Text中则会显示为一行
//被嵌套的组件与位置相关的style样式几乎不生效

//ScrollView

//Touchable TouchableHighlight TouchableOpacity TouchableNativeFeedback
//

//Pressable
//RN0.63以上 替代Touchable TouchableHighlight TouchableOpacity TouchableNativeFeedback
//优点：可以自定义按压与不按压样式


//列表组件
//FlatList SectionList


//功能组件
// ActivityIndicator KeyboardAvoidingViewComponent Modal RefreshControl StatusBar